<!DOCTYPE html>
<html>

<head>
    <title>汇富康达OA办公系统登录</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/ui/foxUI/theme/index.css">
    <link rel="stylesheet" href="/ui/foxUI/theme/oa.css">
    <!-- 引入组件库 -->
    <script src="/ui/foxUI/libs/vue.js"></script>
    <script src="/ui/foxUI/libs/ext.min.js"></script>
    <script src="/ui/foxUI/libs/qrcode.min.js"></script>
    <script src="/ui/foxUI/appConf.js"></script>
    <script src="/ui/foxUI/foxUI.js"></script>
</head>
<body style="background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #2168da;">
<div id="app">
    <div style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;padding-top: 2rem;">
        <el-row>
            <el-col :span="7" :offset="5" style="background: linear-gradient(to top, rgba(83,117,255,.4), rgba(83,117,255,1)); height: 3rem; text-align: center;">
                <h1 style="color:#fff; margin-top: 1rem">汇富康达在线办公</h1>
                <h1 style="color:#fff;">AI智能系统</h1>
            </el-col>
            <el-col :span="7" style="background: linear-gradient(to top, rgba(255,255,255,.4), rgba(255,255,255,1)); position:relative;">
                <el-tooltip effect="light" content="点击此处扫码登录" placement="left">
                    <div style="position:absolute;right: 0;color:#2f2f2f;font-size: .5rem;cursor:pointer;" @click="activeName=activeName==1?0:1"
                         class="oa-icon-banjieerweima"></div>
                </el-tooltip>
                <div style="margin:0 .5rem; height: 3rem;">
                    <br/>
                    <h3 style="color:#000;font-size: .16rem;">登 录</h3>
                    <br/>
                    <el-form :model="form2" status-icon :rules="rules" ref="form2" label-width=".7rem" v-show="activeName==0">
                        <el-form-item label="账号" prop="mobile">
                            <el-input v-model="form2.mobile" autocomplete="off" @keyup.enter.native="submitForm('form2')" placeholder="请输入工号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="pwd">
                            <el-input type="password" v-model="form2.pwd" autocomplete="off" @keyup.enter.native="submitForm('form2')" placeholder="***"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('form2')">立即登录</el-button>
                            <el-button type="primary" @click="dialogVisible = true">修改密码</el-button>
                        </el-form-item>
                    </el-form>
                    <div ref="qrCode" id="qrCode" class="qrCode" v-show="activeName==1"></div>
                </div>
            </el-col>
        </el-row>
    </div>
    <el-dialog
            title="修改密码"
            :visible.sync="dialogVisible"
            :before-close="vm.dialogClose">
        <el-form :model="form3" status-icon :rules="rules" ref="form3" label-width="100px">
            <el-form-item label="账号" prop="mobile">
                <el-input v-model="form3.mobile"></el-input>
            </el-form-item>
            <el-form-item label="原密码" prop="pwd">
                <el-input type="password" v-model="form3.pwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="pwd1">
                <el-input type="password" v-model="form3.pwd1" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="pwd2">
                <el-input type="password" v-model="form3.pwd2" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form3')">提交</el-button>
                <el-button @click="resetForm('form3')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>

<script>
    let timer = {}, qrcode = null;
    let vm = {
        data: {
            dialogVisible: false,
            activeName: '',
            form: {
                jobnum: '',
                code: '',
            },
            form2: {
                mobile: '',
                pwd: '',
            },
            form3: {
                mobile: '',
                pwd: '',
                pwd1: '',
                pwd2: '',
            },
            rules: {
                jobnum: [{required: true, message: '请输入工号', trigger: 'blur'}],
                code: [{required: true, message: '请输入动态码', trigger: 'blur'}],
                mobile: [{required: true, message: '请输入账号', trigger: 'blur'}],
                pwd: [{required: true, message: '请输入密码', trigger: 'blur'}],
                pwd1: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请输入密码'));
                            } else {
                                if (vm.data.form3.pwd2 !== '') {
                                    http.$refs.form3.validateField('pwd2');
                                }
                                callback();
                            }
                        }, trigger: 'blur'
                    }
                ],
                pwd2: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请再次输入密码'));
                            } else if (value !== vm.data.form3.pwd1) {
                                callback(new Error('两次输入密码不一致!'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur'
                    }
                ]
            },
            login: {
                xurl: '/ucenter/user/login',
                afterQuery: function (json) {
                    if (json.res == 1) {
                        if ($is(json.data.ukey)) {
                            appConf.setUserKey(json.data.ukey);
                            if ($is(appConf.getUserKey())) {
                                let loginWebUrl = vm.getCookie('loginWebUrl');
                                setTimeout(() => window.location = (loginWebUrl === '' ? '/ui/oa2/admin.html' : loginWebUrl), 500);
                            } else {
                                http.$alert('cookie保存失败，请按ctrl+shift+del清除cookie');
                            }
                        } else {
                            http.$alert('ukey为空，无法登录');
                        }
                    } else if (json.code == 400) {
                        this.parent.dialogVisible = true
                    }
                }
            },
            login2: {
                xurl: '/ucenter/user/login2',
                afterQuery: function (json) {
                    if (json.res == 1) {
                        if ($is(json.data.ukey)) {
                            appConf.setUserKey(json.data.ukey);
                            if ($is(appConf.getUserKey())) {
                                let loginWebUrl = vm.getCookie('loginWebUrl');
                                vm.setCookie('loginWebUrl', null, -1);
                                setTimeout(() => window.location = (loginWebUrl === '' ? '/ui/oa2/admin.html' : loginWebUrl), 500);
                            } else {
                                http.$alert('cookie保存失败，请按ctrl+shift+del清除cookie');
                            }
                        } else {
                            http.$alert('ukey为空，无法登录');
                        }
                    } else if (json.code == 400) {
                        this.parent.dialogVisible = true
                    }
                }
            },
            setPassword: {
                xurl: "/ucenter/user/chPwd2",
                afterQuery: function (json) {
                    if (json.res == 1) {
                        http.$alert('修改密码成功！');
                        vm.data.dialogVisible = false;
                    }
                }
            },
            ajax: {
                url: 'http://app.hta.ink/wechat/user/ajax',
                cid: '',
                afterQuery: function (json) {
                    if (json.res == 1) {
                        if (json.isok) {
                            this.parent.login.query(json.items);
                        }
                    }
                }
            },
        },
        created() {
            appConf.setUserKey("");
        },
        methods: {
            submitForm(formName) {
                let that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (formName == "form") {
                            that.login.query(that.form);
                        } else if (formName == "form3") {
                            that.setPassword.query(that.form3);
                        } else if (formName == "form2") {
                            that.form3.mobile = that.form2.mobile + "";
                            that.login2.query(that.form2);
                        }
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getQrcode: function () {
                qrcode.clear();
                qrcode.makeCode("http://app.hta.ink/wechat/user/login?cid=" + this.identifying());
            },
            identifying: function () {
                let key = appConf.getKey();
                if (key == "") {
                    key = randomFrom(3000, 8000) + "" + randomFrom(8000, 9000);
                    appConf.setKey(key)
                }
                return randomFrom(1000, 2000) + "" + key + "" + randomFrom(2000, 3000) + "" + Math.round(new Date().getTime() / 1000);
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        },
        watch: {
            activeName: function (val, oldVal) {
                let that = this;
                if (val == 1) {
                    qrcode = new QRCode(that.$refs.qrCode, {
                        text: "http://app.hta.ink/wechat/user/login?cid=" + this.identifying(),
                        width: 130,
                        height: 130,
                        title: '',
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    });
                    timer[0] = setInterval(_ => {
                        that.getQrcode();
                    }, 30 * 1000);
                    timer[1] = setInterval(_ => {
                        that.ajax.cid = that.identifying();
                        that.ajax.query(that.ajax.afterQuery, false);
                    }, 3 * 1000);
                } else {
                    clearInterval(timer[0]);
                    clearInterval(timer[1]);
                    qrcode = null;
                    that.$refs.qrCode.innerHTML = "";
                }
            }
        }
    };
    // document.body.style.backgroundImage = "url('http://img.infinitynewtab.com/wallpaper/" + randomFrom(300, 3000) + ".jpg')";
    document.body.style.backgroundImage = "url('bg.jpg')";
    document.body.style.backgroundSize = "100% auto";
</script>

<style>
    body {
        color: #999;
        background-size: cover;
    }

    .qrCode {
        width: 2rem;
        height: 2rem;
        margin: auto;
        text-align: center;
    }

    .qrCode img {
        width: 1.5rem;
        height: 1.5rem;
    }
</style>

<style>
</style>

</html>